<template>
  <div>
    <!-- 订单列表 -->
    <el-table v-loading="loading" :data="list" style="width: 100%" size="small">
      <el-table-column label="支付号" prop="outTradeNo" align="center" fixed="left" min-width="140" >
        <template slot-scope="{row}">
          <span v-if="row.outTradeNo">{{ row.outTradeNo }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="uuid" align="center" min-width="160" />
      <el-table-column label="套系" prop="name" align="center" min-width="100" show-overflow-tooltip />
      <el-table-column label="归属地" prop="ownType" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <dict-tag :options="dict.type.template_own_type" :value="row.ownType"/>
          </template>
      </el-table-column>
      <el-table-column label="分类" prop="catType" align="center" show-overflow-tooltip >
          <template slot-scope="{row}">
            <dict-tag :options="dict.type.template_cat_type" :value="row.catType"/>
          </template>
      </el-table-column>
      <el-table-column label="商铺" prop="merchant" align="center" >
          <template slot-scope="{row}">
            <dict-tag :options="dict.type.merchant" :value="row.merchant"/>
          </template>
      </el-table-column>
      <el-table-column label="价格" align="center">
        <template slot-scope="{row}">
          <span>{{ row.price / 100 }} 元</span>
        </template>
      </el-table-column>
      <el-table-column label="优惠券" align="center">
        <template slot-scope="{row}">
          <span v-if="row.coupon && row.coupon.uuid">{{ row.coupon.subMoney }}{{ row.coupon.type === 2 ? '折' : '元' }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="实际支付" align="center">
        <template slot-scope="{row}">
          <span>{{ row.payPrice / 100 }} 元</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="{ row }">
          <el-tag size="small" v-if="row.status === 1">已付款</el-tag>
          <el-tag size="small" type="warning" v-if="row.status === 2">制作中</el-tag>
          <el-tag size="small" type="success" v-if="row.status === 3">已完成</el-tag>
          <el-tag size="small" type="danger" v-if="row.status === 4">制作失败</el-tag>
          <el-tag size="small" type="danger" v-if="row.status === 5">已退款</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" min-width="140">
        <template slot-scope="{ row }">
          <span v-if="row.createDate">{{ parseTime(row.createDate) }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>

      <el-table-column label="付款时间" align="center" min-width="140">
        <template slot-scope="{ row }">
          <span v-if="row.payDate">{{ parseTime(row.payDate) }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>

      <el-table-column label="完成时间" align="center" min-width="140">
        <template slot-scope="{ row }">
          <span v-if="row.finishDate">{{ parseTime(row.finishDate) }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="220" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" icon="el-icon-refresh" v-if="row.payPrice && [3,4].includes(row.status)" @click="onReMake(row)">重新制作</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="onInfo(row)">详情</el-button>
          <el-button size="mini" type="text" icon="el-icon-s-open" v-if="row.payPrice && [3,4].includes(row.status)" @click="onRefund(row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 订单详情 -->
    <InfoDialog v-if="infoData.bSwitch" :data="infoData" />
  </div>
</template>

<script>
import InfoDialog from './InfoDialog.vue';
import { delOrder, refundPay, reMakePay } from '@/api/order';
export default {
  dicts: ['template_cat_type', 'template_own_type', 'template_user_type', 'merchant'],
  components: {
    InfoDialog
  },
  props: {
    loading: {
      type: Boolean,
      default() {
        return false;
      },
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    }
  },
  data() {
    return {
      infoData: {
        id: null,
        bSwitch: false
      }
    }
  },
  methods: {
    // 详情
    onInfo(row) {
      this.infoData.id = row.uuid
      this.infoData.bSwitch = true
    },
    // 删除
    onDelete(row) {
        this.$confirm('是否删除该订单?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }).then(() => {
            return delOrder(row.uuid)
        }).then(() => {
            this.$emit('delete')
            this.$modal.msgSuccess("删除订单成功")
        })
    },
    // 退款
    onRefund(row) {
        // 订单完成48小时后并且不是admin不能退款，只有admin可以退款
        console.log(this.$store.getters.roles)
        const isOverTime = new Date(row.finishDate).getTime() + 48 * 60 * 60 * 1000 > new Date().getTime()
        const isAdmin = this.$store.getters.roles.includes('admin')
        if(isOverTime && !isAdmin) {
          this.$modal.msgError("订单完成48小时后不能退款， 特殊情况请联系超级管理员！")
          return
        }
        this.$confirm(`订单号：${row.uuid}，是否发起退款?`, '提示', {
            confirmButtonText: '退款',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          const params = {
            uuid: row.uuid,
            reason: '系统退款'
          }
          refundPay(params).then(res => {
            console.log('系统退款', res)
            if(res.code === 200) {
              this.$emit('refresh')
              this.$modal.msgSuccess("退款成功")
            }
          })
        })
    },
    // 重新制作
    onReMake(row) {
      this.$confirm(`套系：${row.name} 支付单号：${row.outTradeNo} 订单号：${row.uuid}  是否重新制作?`, '提示', {
        confirmButtonText: '重新制作',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          uuid: row.uuid
        }
        reMakePay(params).then(res => {
          console.log('重新制作', res)
          if(res.code === 200) {
            this.$emit('refresh')
            this.$modal.msgSuccess("重新制作成功")
            this.$modal.msgInfo("重新制作不会改变订单状态，让用户等几分钟即可看到新照片")
          }
        })
      })
    }
  }
};
</script>

<style lang="scss" scoped></style>